<template>
  <a-descriptions>
    <template #title>
      <span>流程实例Id：{{ props.instanceId }}</span>
      <a @click="copyClick(props.instanceId)" title="点击复制流程实例id">
        <Icon icon="ant-design:copy-outlined" style="font-size: 15px; margin-left: 2px" />
      </a>
    </template>
    <a-descriptions-item label="流程实例名称">{{ instance.name }}</a-descriptions-item>
    <a-descriptions-item label="创建时间">{{ instance.startTime }}</a-descriptions-item>
    <a-descriptions-item label="实例启动者">{{ instance.startUserId }}</a-descriptions-item>
    <a-descriptions-item label="是否挂起">{{ instance.suspended ? '已挂起' : '运行中' }}</a-descriptions-item>
    <a-descriptions-item label="部署id">
      {{ instance.deploymentId }}
      <a @click="copyClick(instance.deploymentId)" title="点击复制">
        <Icon icon="ant-design:copy-outlined" style="font-size: 15px; margin-left: 2px" />
      </a>
    </a-descriptions-item>
    <a-descriptions-item label="流程定义id">
      {{ instance.processDefinitionId }}
      <a @click="copyClick(instance.processDefinitionId)" title="点击复制">
        <Icon icon="ant-design:copy-outlined" style="font-size: 15px; margin-left: 2px" />
      </a>
    </a-descriptions-item>
    <a-descriptions-item label="流程定义Key">
      {{ instance.processDefinitionKey }}
      <a @click="copyClick(instance.processDefinitionKey)" title="点击复制">
        <Icon icon="ant-design:copy-outlined" style="font-size: 15px; margin-left: 2px" />
      </a>
    </a-descriptions-item>
    <a-descriptions-item label="流程定义名称">{{ instance.processDefinitionName }}</a-descriptions-item>
    <a-descriptions-item label="流程定义版本">V{{ instance.processDefinitionVersion }}</a-descriptions-item>
    <a-descriptions-item label="流程业务key">{{ instance.businessKey }}</a-descriptions-item>
    <a-descriptions-item label="流程定义描述">{{ instance.description }}</a-descriptions-item>
  </a-descriptions>
</template>

<script lang="ts" setup>
  import { message } from 'ant-design-vue'
  import { defineProps, onMounted, reactive, watch } from 'vue'
  import { getProcessInstance } from '../ActProcessInst.api'

  const props = defineProps({
    instanceId: String,
  })

  watch(
    // 这种写法会侦听到 props 中 test 的变化
    () => props.instanceId,
    (instanceId: string) => {
      console.log('InstanceDetail 侦听instanceId', instanceId)
      getProcessInstance({ procInsId: instanceId }).then((data) => {
        console.log('获取流程实例', data)
        if (data !== null) {
          Object.assign(instance, data)
        }
      })
    }
  )

  let instance = reactive<any>({})

  /**
   * 复制
   * @param value
   */
  function copyClick(value) {
    // 创建input元素
    const el = document.createElement('input')
    // 给input元素赋值需要复制的文本
    el.setAttribute('value', value)
    // 将input元素插入页面
    document.body.appendChild(el)
    // 选中input元素的文本
    el.select()
    // 复制内容到剪贴板
    document.execCommand('copy')
    // 删除input元素
    document.body.removeChild(el)
    message.success('复制成功')
  }

  onMounted(() => {
    console.log('InstanceDetail onMounted')
  })
</script>

<style lang="less" scoped></style>
